<template>
  <div class="common-warp wh100 warp-bg">
    <div class="noo">
      <a-card title="组织信息">
        <a-form ref="formRef" :model="state.form" :rules=rules>
          <a-form-item label="组织名称" name="name">
            <a-input v-model:value="state.form.name" />
          </a-form-item>
          <a-form-item label="上级组织" name="parentCode">
            <a-cascader disabled v-model:value="state.form.parentCode" change-on-select
              :fieldNames="{ children: 'children', label: 'name', value: 'code' }" :options="state.organizationTree" />
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <a-button type="primary" block @click="confirm(formRef)">提交</a-button>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, } from 'vue';
import { usePersonOrganizationListApi, usePersonOrganizationUpdateApi } from '@/api/index'
import { message } from 'ant-design-vue';
import { useRoute, useRouter } from 'vue-router'
import type { PositionItem } from '@/types/person/position';
const route = useRoute()

const router = useRouter()
const formRef = ref();

const rules = {
  name: [{ required: true, message: '请输入组织名称', trigger: 'change' }],
};

const useContent = () => {
  return {
    name: "",
    code: "",
    parentCode: "",
  }
}

const state = reactive({
  form: useContent(),
  organizationList: [],
  organizationTree: []
})

//提交
const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    await usePersonOrganizationUpdateApi(state.form)
    message.success("操作成功", 2);
    setTimeout(() => {
      router.push({ name: 'PersonOrganization' })
    }, 2300)
  })
};

onMounted(async () => {
  document.title = '编辑'
  await getPositionList()
  let { name, code, parentCode }: any = route.query
  state.form.name = name
  state.form.code = code
  state.form.parentCode = findParentCodeList(state.organizationList, route.query)
})

function formatTree(data: PositionItem[], parentCode: string) {
  let result = [] as any[];
  data.forEach((item: PositionItem) => {
    if (item.parentCode === parentCode) {
      let children = formatTree(data, item.code)
      if (children.length === 0) {
        children = null
      }
      item.children = children
      result.push(item)
    }
  });
  return result;
}

const findParentCodeList = (list, row) => {
  let result = [row.parentCode]
  function find(data, code) {
    for (let i = 0; i < data.length; i++) {
      if (data[i].code == code) {
        return data[i].parentCode
      }
    }
    return ''
  }
  let parentCode = row.parentCode
  for (; ;) {
    parentCode = find(list, parentCode)
    if (parentCode !== '') {
      result.push(parentCode)
    }
    if (parentCode === '') {
      break
    }
  }
  result.reverse()
  return result
}

const getPositionList = async () => {
  let { data } = await usePersonOrganizationListApi()
  state.organizationTree = formatTree(data,'')
  state.organizationList = data
}

</script>
<style scoped lang='less'>
.noo {
  height: calc(100vh - 56px);
  overflow-y: scroll;

  :deep(.ant-form-item-label) {
    padding: 0 !important;
  }

  :deep(.ant-card-body) {
    padding: 12px !important;
  }

  :deep(.ant-card-head) {
    padding: 12px !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }

}
</style>